<template>
    <el-container class="dashboard">
        <el-main style="padding:5px;">
    <el-row :gutter="2">

 
       
   <!-- 左侧信息栏 -->
   <el-col :span="5">
    <el-card class="card" style="height:250px" :body-style="{ padding: '0 5px'}">
      <div class="section-title-wrapper">
        <!-- 左侧带条状颜色标题 -->
        <div class="section-title" style="--bar-color:#59ba59;">基地信息</div>
        
        <!-- 右侧下拉框 -->
        <el-select
          v-model="selectedBaseId"
          placeholder="选择基地"
          size="small"
          style="width: 150px;"
          @change="handleBaseChange"
        >
          <el-option
            v-for="item in baseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
  
      <!-- 基地信息展示 -->
      <el-descriptions v-if="selectedBase" :column="2" >
        <el-descriptions-item>
    
           <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/crop.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">作物名称</span>
         
            <span class="plotMessage-item-right-value">{{ selectedBase.crop }}</span>
            </div>
           </div>
        </el-descriptions-item>
  
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/variety.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">品种名称</span>
         
            <span class="plotMessage-item-right-value">{{ selectedBase.variety }}</span>
            </div>
           </div>
        </el-descriptions-item>
  
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/area.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">种植面积</span>
         
            <span class="plotMessage-item-right-value">{{ selectedBase.area }}亩</span>
            </div>
           </div>
        </el-descriptions-item>
  
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/director.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">基地主任</span>
         
            <span class="plotMessage-item-right-value">{{ selectedBase.director }}</span>
            </div>
           </div>
        </el-descriptions-item>
  
        <el-descriptions-item :span="2">
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/address.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">基地地址</span>
         
            <span class="plotMessage-item-right-value">{{ selectedBase.address }}</span>
            </div>
           </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
 
    
<!-- 环境 -->
    <el-card class="card" style="height:200px" :body-style="{ padding: '0 5px'}">
      <div class="section-title-wrapper">
        <!-- 左侧带条状颜色标题 -->
        <div class="section-title" style="--bar-color:#59ba59;">环境实时监测</div>
        </div>
      <el-descriptions column="3">
       
      
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/text.png"/>
           
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">天气情况</span>
         
            <span class="plotMessage-item-right-value">{{ weather.text }}</span>
            </div>
          </div>
        </el-descriptions-item>
      
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/temp.png"/>
          
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">温度</span>
         
            <span class="plotMessage-item-right-value">{{ weather.temp }}</span>
            </div>
          </div>
        </el-descriptions-item>
      
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/humidity.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">相对湿度</span>
         
            <span class="plotMessage-item-right-value">{{ weather.humidity }}</span>
            </div>
          </div>
        </el-descriptions-item>
      
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/windDir.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">方向</span>
         
            <span class="plotMessage-item-right-value">{{ weather.windDir }}</span>
            </div>
          </div>
        </el-descriptions-item>
      
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/windScale.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">风力等级</span>
         
            <span class="plotMessage-item-right-value">{{ weather.windScale }}</span>
            </div>
          </div>
        </el-descriptions-item>
      
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/windSpeed.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">风速</span>
         
            <span class="plotMessage-item-right-value">{{ weather.windSpeed }}</span>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 物联网数据监测 -->
    <el-card class="card"  >
      <div class="section-title-wrapper">
        <!-- 左侧带条状颜色标题 -->
        <div class="section-title" style="--bar-color:#59ba59;">物联网监测</div>
        
        <!-- 右侧下拉框 -->
        <el-select
          v-model="selectedDeviceId"
          placeholder="选择设备"
          size="small"
          style="width: 150px;"
          @change="handleDeviceChange"
        >
          <el-option
            v-for="item in deviceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <el-descriptions column="2">
        <el-descriptions-item >
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/device/temp.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">土壤温度</span>
         
            <span class="plotMessage-item-right-value">{{ iotData.soilTemperature }}</span>
            </div>
           </div>
        </el-descriptions-item>
        <el-descriptions-item ">
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/device/humidity.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">土壤湿度</span>
         
            <span class="plotMessage-item-right-value">{{ iotData.soilHumidity }}</span>
            </div>
           </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/device/light.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">光照强度</span>
         
            <span class="plotMessage-item-right-value">{{ iotData.lightIntensity }} Lux</span>
            </div>
           </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <div class="plotMessage-item">
            <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/device/co2.png"/>
            <div class="plotMessage-item-right">
              <span class="plotMessage-item-right-title">二氧化碳浓度</span>
         
            <span class="plotMessage-item-right-value">{{ iotData.co2}}</span>
            </div>
           </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 环境趋势 -->
    <el-card class="card" style="height: 280px;">
      <div class="section-title-wrapper" >
        <!-- 左侧带条状颜色标题 -->
        <div class="section-title" style="--bar-color:#59ba59;">今日环境趋势</div>
    
        <!-- 右侧两个下拉框 -->
        <div style="display: flex; gap: 10px;">
          <!-- 选择设备 -->
          <el-select
            v-model="selectedTHDeviceId"
            placeholder="选择设备"
            size="small"
            style="width: 65px;"
            @change="updateChart"
          >
            <el-option
              v-for="item in thDeviceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
    
          <!-- 选择类型 -->
          <el-select
            v-model="selectedType"
            placeholder="选择类型"
            size="small"
            style="width: 65px;"
            @change="updateChart"
          >
            <el-option
              v-for="type in typeList"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </div>
      </div>
    
      <!-- 图表区域 -->
      <div ref="tempHumidityChart" style="width:100%;height:200px"></div>
    </el-card>
  
  </el-col>

  <!-- 中间内容 -->
  <el-col :span="14" >
  
      

          <el-card class="card">
            <div style="height: 670px;">
              <Map/>
            </div>
          </el-card>
          <!-- 问答库 & 预警提醒 -->
<el-row :gutter="5" style="margin-top:3px;">
  <!-- 问答库 -->
  <el-col :span="12">
    <el-card class="card" style="height:230px;" :body-style="{padding:'0'}">
      <div class="section-title-wrapper">
        <div class="section-title" style="--bar-color:#59ba59;">问答库</div>
        <el-button type="text" size="small" @click="goMoreQA">更多</el-button>
      </div>
      <el-scrollbar style="height:210px;">
        <div v-for="item in qaList" :key="item.id" style="padding:5px 10px;">
          <div style="font-size:14px;color:#333;margin-bottom:5px;color:#59ba59;font-weight:700">{{ item.content }}</div>
          <div style="font-size:12px;color:#999;">提问时间：{{ item.time }}</div>
        </div>
      </el-scrollbar>
    </el-card>
  </el-col>

  <!-- 预警提醒 -->
  <el-col :span="12">
    <el-card class="card" style="height:230px;" :body-style="{padding:'0'}">
      <div class="section-title-wrapper">
        <div class="section-title" style="--bar-color:#ff4d4f;">预警提醒</div>
        <el-button type="text" size="small" @click="goMoreWarning">更多</el-button>
      </div>
      <el-scrollbar style="height:210px;">
        <div v-for="item in warningList" :key="item.id" style="padding:5px 10px;">
          <div style="font-size:14px;color:#d9534f;margin-bottom:5px;font-weight:700">{{ item.content }}</div>
          <div style="font-size:12px;color:#999;">预警时间：{{ item.time }}</div>
        </div>
      </el-scrollbar>
    </el-card>
  </el-col>
</el-row>
  </el-col>

  <!-- 右侧图表栏 -->
  <el-col :span="5">
    <el-card class="card" style="height: 260px;">
      <div class="section-title-wrapper">
        <!-- 左侧带条状颜色标题 -->
        <div class="section-title" style="--bar-color:#59ba59;">天气预报</div>
        </div>
  
      <!-- 头部 -->
      <div class="weather-header">
        <span class="city">泰安</span>
        <span class="date">2025-9-02 周二</span>
        <span class="lunar">农历 八月十一</span>
      </div>
  
      <!-- 中间三天横向排列 -->
      <div class="weather-body">
        <div class="weather-day" v-for="(day, index) in weatherList" :key="index">
          <div class="title">{{ day.title }}</div>
          <img :src="day.icon" alt="天气图标" class="weather-icon" />
          <div class="temp">{{ day.temp }}</div>
        </div>
      </div>
  
      <!-- 底部时间 -->
      <div class="update-time">
        更新时间：2025-08-14 08:00
      </div>
    </el-card>
    <el-card class="card" style="height: 290px;">
        <div class="section-title-wrapper">
        <div class="section-title" style="--bar-color:#59ba59;">病虫害监测</div>
          </div>
          
      <div ref="insectChart" style="width:100%;height:200px"></div>
  
    </el-card>

    <!-- <el-card class="card">
      <div class="section-title-wrapper">
        <div class="section-title" style="--bar-color:#59ba59;">病害监测</div>
          </div>
    
      <div ref="diseaseChart" style="width:100%;height:150px"></div>
  
    </el-card> -->
       <!-- 病虫害识别记录 -->
       <el-card class="card" style="height:385px;">
        <div class="section-title-wrapper">
          <div class="section-title" style="--bar-color:#59ba59;">象差历史诊断</div>
          <el-button type="text" size="small" @click="goMoreWarning">更多</el-button>
        </div>
        <el-scrollbar style="height:350px;">
          <el-row :gutter="10" v-for="item in pestRecords" :key="item.id" style="margin-bottom:10px;">
            <el-col :span="6">
              <el-image :src="item.image" style="width:100%;height:80px;object-fit:cover"/>
            </el-col>
            <el-col :span="18">
              <div style="font-size:14px;margin-bottom:5px;font-weight:700">诊断结果: {{ item.result }}</div>
              <div style="font-size:14px;margin-bottom:5px;">位置: {{ item.place }}</div>
              <div style="font-size:12px;color:#999;">诊断时间: {{ item.time }}</div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-card>
    
   
  </el-col>

      
       
        </el-row>
        <!-- <Monitor/> -->
     </el-main>
    </el-container>
  </template>
  
  <script setup>
  import { onMounted, ref,computed } from 'vue'
  import * as echarts from 'echarts'
  import { getWeather } from '@/api/agriculture/guo/smartScreen'
import Map from '@/components/agriculture/guo/smartScreen/Map.vue'
import Monitor from '@/components/agriculture/guo/smartScreen/Monitor.vue'
  const insectChart = ref(null)
  const diseaseChart = ref(null)
  const weather = ref({})
  const iotData = ref({
  soilTemperature: 22.5,
  soilHumidity: 45,
  lightIntensity: 800,
  co2: 380
})
  // 区域与基地数据
  const selectedBaseId = ref(null)
  const selectedBase = ref({})
  // 选择物联网设备
  const selectedDeviceId = ref(null)
  const selectedDevice = ref({})


// 类型列表
const typeList = ref([
  { value: 'rainfall', label: '降雨量' },
  { value: 'humidity', label: '湿度' },
  { value: 'temperature', label: '温度' }
])

// 当前选择
const selectedTHDeviceId = ref(null)
const selectedType = ref(null)

const tempHumidityChart = ref(null)
let chartInstance = null

// 更新图表
const updateChart = () => {
  if (!selectedTHDeviceId.value || !selectedType.value) return

  // 模拟 24 小时数据
  const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
  const values = Array.from({ length: 24 }, () => Math.floor(Math.random() * 100))

  const option = {
    tooltip: { trigger: 'axis' },
    grid: { top: 20, bottom: 20, left: 30, right: 20 },
    xAxis: { type: 'category', data: hours },
    yAxis: { type: 'value' },
    series: [
      {
        name: typeList.value.find(t => t.value === selectedType.value).label,
        type: 'line',
        smooth: true,
        data: values
      }
    ]
  }

  chartInstance.setOption(option)
}

const baseList = ref([
  { id: 1, name: '泰安', crop: '小麦', area: '268', variety: '优质麦1号', director: '王鑫', address: '山东省泰安市泰山区' },
  { id: 2, name: '济南', crop: '玉米', area: '315', variety: '高产玉米2号', director: '李青', address: '山东省济南市历下区' },
  { id: 3, name: '苏州', crop: '水稻', area: '200', variety: '抗病稻3号', director: '张华山', address: '江苏省苏州市相城区' }
])
const deviceList = ref([
  { id: 1, name: '设备1' },
  { id: 2, name: '设备2' },
  { id: 3, name: '设备3' }
])
const thDeviceList = ref([
  { id: 1, name: '设备1' },
  { id: 2, name: '设备2' },
  { id: 3, name: '设备3' }
])
// 病虫害识别记录
const pestRecords = ref([
  { id:1, image:'/images/agriculture/smartScreen/xiangCha/juan.png', result:'卷叶螟',place:'地块1', device:'设备1',time:'2025-08-13 10:12' },
  { id:2, image:'/images/agriculture/smartScreen/xiangCha/wen.png', result:'纹枯病',place:'地块2',device:'设备3', time:'2025-08-13 09:50' },
  { id:3, image:'/images/agriculture/smartScreen/xiangCha/chi.png', result:'赤霉病', place:'地块1',device:'设备2',time:'2025-08-12 16:30' },
  { id:4, image:'/images/agriculture/smartScreen/xiangCha/wen.png', result:'纹枯病',place:'地块3', device:'设备1',time:'2025-08-12 13:30' }
])
// 天气预报
const weatherList = [
  { title: "今天", icon: "https://cdn-icons-png.flaticon.com/512/1163/1163624.png", temp: "25℃ ~ 32℃" },
  { title: "明天", icon: "https://cdn-icons-png.flaticon.com/512/1163/1163657.png", temp: "24℃ ~ 31℃" },
  { title: "后天", icon: "https://cdn-icons-png.flaticon.com/512/1163/1163664.png", temp: "23℃ ~ 30℃" }
];
  onMounted(() => {
    getWeather().then(res => {
     weather.value = res.data.now
    })
    // 初始化展示第一个区域
    if (baseList.value.length > 0) {
    selectedBaseId.value = baseList.value[0].id
    handleBaseChange(selectedBaseId.value)
  }
  if (deviceList.value.length > 0) {
    selectedDeviceId.value = deviceList.value[0].id
    handleDeviceChange(selectedDeviceId.value)
  
  }

  
  // 物联网数据
  // 物联网监测数据模拟或接口获取

 // 虫害监测
  const iChart = echarts.init(insectChart.value)
  iChart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { top: 20, bottom: 20, left: 30, right: 20 },
    xAxis: { type: 'category', data: ['卷叶螟', '粗缩病', '纹枯病'] ,axisTick: { alignWithLabel: true }},
    yAxis: { type: 'value' },
    series: [
      {
        type: 'bar',
        data: [60,30,40],
        barWidth: 30,
        itemStyle: {
        color: (params) => {
          const colors = ['#4caf50', '#2196f3', '#ff9800'] // 每条柱的颜色
          return colors[params.dataIndex]
        }
      }
      }
    ]
  })
  
  // 今日环境趋势
  chartInstance = echarts.init(tempHumidityChart.value)
  selectedTHDeviceId.value = thDeviceList.value[0].id
  selectedType.value = typeList.value[0].value
  updateChart()
 
  
  })
 
const handleBaseChange = (val) => {
  const base = baseList.value.find(item => item.id === val)
  if (base) {
    selectedBase.value = base
  }
}
const handleDeviceChange = (val) => {
  const device = deviceList.value.find(item => item.id === val)
  if ( device ) {
    selectedDevice .value = device
  }
}


const qaList = ref([
  { id:1, content:"如何防治小麦赤霉病？", time:"2025-08-13 08:30" },
  { id:2, content:"玉米的最佳施肥时期是什么时候？", time:"2025-08-12 14:20" },
  { id:3, content:"纹枯病的防控方案有哪些？", time:"2025-08-11 09:15" }
])

const warningList = ref([
  { id:1, content:"土壤湿度过低，请及时灌溉", time:"2025-08-13 09:50" },
  { id:2, content:"检测到病害发生率上升，请关注", time:"2025-08-12 17:10" },
  { id:3, content:"光照强度过低，注意补光", time:"2025-08-12 07:45" }
])

const goMoreQA = () => {
  console.log("跳转到更多问答页面")
}

const goMoreWarning = () => {
  console.log("跳转到更多预警页面")
}





  </script>
  
  <style scoped>
  .dashboard {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  }
  .card {
    margin-bottom: 2px;
    position: relative;
  }
  .warning{
    display: flex;
    

  }
  .warning-text{
    margin-left: 20px;
  }


  .section-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右分布 */
    height: 40px;
    background-color: #eeeef0;
    padding: 5px;
    margin-bottom: 10px;
  
  }
  
 .section-title {
  font-weight: bold;
  position: relative;
  padding-left: 8px;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 4px;
  background-color: var(--bar-color, #59ba59);
}
  .plotMessage-item{
    display: flex;
    align-items: center;
  }
  .plotMessage-item-right{
   display: flex;
   flex-direction: column;
   margin-left: 10px;
  }
  .plotMessage-item-right-title{
    color: #1a1a1a;
  }
  .plotMessage-item-right-value{
    color: #70afea;
  }
  .section-title-warning {
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
   width:100px;
   text-align: center;
    background-color: #ea8f34;
  }

  
  /* 天气预报标题 */
  .main-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  
  /* 头部样式 */
  .weather-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .weather-header .city {
    font-weight: bold;
    color: green; /* 泰安字体绿色 */
  }
  .weather-header .date,
  .weather-header .lunar {
    font-size: 14px;
    color: #555;
  }
  
  /* 中间三天横向排列 */
  .weather-body {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
  }
  .weather-day {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .weather-day .title {
    font-weight: bold;
    margin-bottom: 5px;
  }
  .weather-day .weather-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
  }
  .weather-day .temp {
    font-size: 14px;
    color: #333;
  }
  
  /* 底部时间 */
  .update-time {
    font-size: 12px;
    color: gray;
    text-align: right;
  }
  </style>
  